import React, { Component } from 'react'
import axios from 'axios'
import "./GrabToday.scss"
import GrabTabBar from "./grabTabBar/GrabTabBar"
import GrabActivity from './grabActivity/GrabActivity'

// 引入图片
import grabToday from "../../assets/images/grabToday"
import allSaleImg from "../../assets/images/allsale2"


export default class navTopTop extends Component {
    state = {
        navTop: [],
        allSale: []
    }

    componentDidMount(){
        axios.get("./json/GrabToday.json").then(res=>{
            let navTop_str = res.data;
            let navTop = navTop_str.data.list;
            // 过滤掉最后一个
            // console.log(res);
            // navTop = navTop.filter((item) => {
            //     return item.sort < 17;
            // });
            this.setState({ navTop });
            // console.log(res);
        })
    }

    // 跳转商品详情页面
    goToNewDetail=(id)=>{
        this.props.history.push('/details/'+ "1msvj44")
    }

    render() {
        return (
            <div className="mall-grabToday">
                {/* {this.props.match.params.id} */}
                {/* 今日必抢开始 */}
                <div className="grabToday-top">
                    <img className="grabTodayImg" src={grabToday} alt=""/>
                    <div className="navTop">
                        {
                            this.state.navTop.map((v,i) => {
                                return (
                                    <div className="nav-item" key={v.iid} onClick={this.goToNewDetail.bind(this,i)}>
                                        <div className="nav-img">
                                            <img className="navImg" src={v.image} alt="" key={v.iid}/>
                                        </div>
                                        <div className="nav-content" key={v.iid}>
                                            <span className="content-title">{v.title}</span>
                                            <div className="cotent-bottom">
                                                <div className="bottom-left">
                                                <span>￥{v.salePrice}</span>
                                                    <em>￥{v.price}</em>
                                                </div>
                                                <div className="bottom-right">
                                                    <span>抢</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="grabbed">
                                            <i className="iconfont icon-shandian"></i>
                                            <span>已抢{v.totalsale}件</span>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="mall-allSale">
                        {
                            this.state.navTop.map((v,i) => {
                                return (
                                <div className="allSale" onClick={this.goToNewDetail.bind(this,i)}>
                                    <div className="allSale-item">
                                        <img className="allSaleImg" src={allSaleImg} alt=""/>
                                    </div>
                                   
                                </div>
                                )
                            })
                        }
                        
                    </div>
                </div>
                {/* 今日必抢结束 */}
                {/* 开抢商品展示开始 */}
                <GrabActivity/>
                {/* 开抢商品展示结束 */}
                {/* 底部导航条开始 */}
                <GrabTabBar/>
                {/* 底部导航条结束 */}
            </div>
        )
    }
}
